[[...path]].page.tsx 8.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233
  1. import React, { useMemo } from 'react';
  2. import { IUserHasId } from '@growi/core';
  3. import { model as mongooseModel } from 'mongoose';
  4. import {
  5. GetServerSideProps, GetServerSidePropsContext,
  6. } from 'next';
  7. import { useTranslation } from 'next-i18next';
  8. import { serverSideTranslations } from 'next-i18next/serverSideTranslations';
  9. import dynamic from 'next/dynamic';
  10. import Head from 'next/head';
  11. import { useRouter } from 'next/router';
  12. import { BasicLayout } from '~/components/Layout/BasicLayout';
  13. import { CrowiRequest } from '~/interfaces/crowi-request';
  14. import type { RendererConfig } from '~/interfaces/services/renderer';
  15. import { ISidebarConfig } from '~/interfaces/sidebar-config';
  16. import { IUserUISettings } from '~/interfaces/user-ui-settings';
  17. import { UserUISettingsModel } from '~/server/models/user-ui-settings';
  18. import {
  19. useCurrentUser, useIsSearchPage,
  20. useIsSearchServiceConfigured, useIsSearchServiceReachable,
  21. useCsrfToken, useIsSearchScopeChildrenAsDefault,
  22. useRegistrationWhiteList, useShowPageLimitationXL, useRendererConfig,
  23. } from '~/stores/context';
  24. import {
  25. usePreferDrawerModeByUser, usePreferDrawerModeOnEditByUser, useSidebarCollapsed, useCurrentSidebarContents, useCurrentProductNavWidth,
  26. } from '~/stores/ui';
  27. import loggerFactory from '~/utils/logger';
  28. import { NextPageWithLayout } from '../_app.page';
  29. import {
  30. CommonProps, getNextI18NextConfig, getServerSideCommonProps, generateCustomTitle, useInitSidebarConfig,
  31. } from '../utils/commons';
  32. const logger = loggerFactory('growi:pages:me');
  33. type Props = CommonProps & {
  34. isSearchServiceConfigured: boolean,
  35. isSearchServiceReachable: boolean,
  36. isSearchScopeChildrenAsDefault: boolean,
  37. userUISettings?: IUserUISettings
  38. sidebarConfig: ISidebarConfig,
  39. rendererConfig: RendererConfig,
  40. showPageLimitationXL: number,
  41. // config
  42. registrationWhiteList: string[],
  43. };
  44. const PersonalSettings = dynamic(() => import('~/components/Me/PersonalSettings'), { ssr: false });
  45. // const MyDraftList = dynamic(() => import('~/components/MyDraftList/MyDraftList'), { ssr: false });
  46. const InAppNotificationPage = dynamic(
  47. () => import('~/components/InAppNotification/InAppNotificationPage').then(mod => mod.InAppNotificationPage), { ssr: false },
  48. );
  49. const MePage: NextPageWithLayout<Props> = (props: Props) => {
  50. const router = useRouter();
  51. const { t } = useTranslation(['translation', 'commons']);
  52. const { path } = router.query;
  53. const pagePathKeys: string[] = Array.isArray(path) ? path : ['personal-settings'];
  54. const mePagesMap = useMemo(() => {
  55. return {
  56. 'personal-settings': {
  57. title: t('User Settings'),
  58. component: <PersonalSettings />,
  59. },
  60. // drafts: {
  61. // title: t('My Drafts'),
  62. // component: <MyDraftList />,
  63. // },
  64. 'all-in-app-notifications': {
  65. title: t('commons:in_app_notification.notification_list'),
  66. component: <InAppNotificationPage />,
  67. },
  68. };
  69. }, [t]);
  70. const getTargetPageToRender = (pagesMap, keys): {title: string, component: JSX.Element} => {
  71. return keys.reduce((pagesMap, key) => {
  72. return pagesMap[key];
  73. }, pagesMap);
  74. };
  75. const targetPage = getTargetPageToRender(mePagesMap, pagePathKeys);
  76. useIsSearchPage(false);
  77. useCurrentUser(props.currentUser ?? null);
  78. useRegistrationWhiteList(props.registrationWhiteList);
  79. useShowPageLimitationXL(props.showPageLimitationXL);
  80. // commons
  81. useCsrfToken(props.csrfToken);
  82. // init sidebar config with UserUISettings and sidebarConfig
  83. useInitSidebarConfig(props.sidebarConfig, props.userUISettings);
  84. // page
  85. useIsSearchServiceConfigured(props.isSearchServiceConfigured);
  86. useIsSearchServiceReachable(props.isSearchServiceReachable);
  87. useIsSearchScopeChildrenAsDefault(props.isSearchScopeChildrenAsDefault);
  88. useRendererConfig(props.rendererConfig);
  89. const title = generateCustomTitle(props, targetPage.title);
  90. return (
  91. <>
  92. <Head>
  93. <title>{title}</title>
  94. </Head>
  95. <div className="dynamic-layout-root">
  96. <header className="py-3">
  97. <div className="container-fluid">
  98. <h1 className="title">{ targetPage.title }</h1>
  99. </div>
  100. </header>
  101. <div id="grw-fav-sticky-trigger" className="sticky-top"></div>
  102. <div id="main" className='main'>
  103. <div id="content-main" className="content-main grw-container-convertible">
  104. {targetPage.component}
  105. </div>
  106. </div>
  107. </div>
  108. </>
  109. );
  110. };
  111. MePage.getLayout = function getLayout(page) {
  112. return (
  113. <BasicLayout>{page}</BasicLayout>
  114. );
  115. };
  116. async function injectUserUISettings(context: GetServerSidePropsContext, props: Props): Promise<void> {
  117. const req = context.req as CrowiRequest<IUserHasId & any>;
  118. const { user } = req;
  119. const UserUISettings = mongooseModel('UserUISettings') as UserUISettingsModel;
  120. const userUISettings = user == null ? null : await UserUISettings.findOne({ user: user._id }).exec();
  121. if (userUISettings != null) {
  122. props.userUISettings = userUISettings.toObject();
  123. }
  124. }
  125. async function injectServerConfigurations(context: GetServerSidePropsContext, props: Props): Promise<void> {
  126. const req: CrowiRequest = context.req as CrowiRequest;
  127. const { crowi } = req;
  128. const {
  129. searchService,
  130. configManager,
  131. } = crowi;
  132. props.isSearchServiceConfigured = searchService.isConfigured;
  133. props.isSearchServiceReachable = searchService.isReachable;
  134. props.isSearchScopeChildrenAsDefault = configManager.getConfig('crowi', 'customize:isSearchScopeChildrenAsDefault');
  135. props.registrationWhiteList = configManager.getConfig('crowi', 'security:registrationWhiteList');
  136. props.showPageLimitationXL = crowi.configManager.getConfig('crowi', 'customize:showPageLimitationXL');
  137. props.sidebarConfig = {
  138. isSidebarDrawerMode: configManager.getConfig('crowi', 'customize:isSidebarDrawerMode'),
  139. isSidebarClosedAtDockMode: configManager.getConfig('crowi', 'customize:isSidebarClosedAtDockMode'),
  140. };
  141. props.rendererConfig = {
  142. isEnabledLinebreaks: configManager.getConfig('markdown', 'markdown:isEnabledLinebreaks'),
  143. isEnabledLinebreaksInComments: configManager.getConfig('markdown', 'markdown:isEnabledLinebreaksInComments'),
  144. adminPreferredIndentSize: configManager.getConfig('markdown', 'markdown:adminPreferredIndentSize'),
  145. isIndentSizeForced: configManager.getConfig('markdown', 'markdown:isIndentSizeForced'),
  146. plantumlUri: process.env.PLANTUML_URI ?? null,
  147. blockdiagUri: process.env.BLOCKDIAG_URI ?? null,
  148. // XSS Options
  149. isEnabledXssPrevention: configManager.getConfig('markdown', 'markdown:rehypeSanitize:isEnabledPrevention'),
  150. xssOption: configManager.getConfig('markdown', 'markdown:rehypeSanitize:option'),
  151. attrWhiteList: JSON.parse(crowi.configManager.getConfig('markdown', 'markdown:rehypeSanitize:attributes')),
  152. tagWhiteList: crowi.configManager.getConfig('markdown', 'markdown:rehypeSanitize:tagNames'),
  153. highlightJsStyleBorder: crowi.configManager.getConfig('crowi', 'customize:highlightJsStyleBorder'),
  154. };
  155. }
  156. // /**
  157. // * for Server Side Translations
  158. // * @param context
  159. // * @param props
  160. // * @param namespacesRequired
  161. // */
  162. async function injectNextI18NextConfigurations(context: GetServerSidePropsContext, props: Props, namespacesRequired?: string[] | undefined): Promise<void> {
  163. // preload all languages because of language lists in user setting
  164. const nextI18NextConfig = await getNextI18NextConfig(serverSideTranslations, context, namespacesRequired, true);
  165. props._nextI18Next = nextI18NextConfig._nextI18Next;
  166. }
  167. export const getServerSideProps: GetServerSideProps = async(context: GetServerSidePropsContext) => {
  168. const req = context.req as CrowiRequest<IUserHasId & any>;
  169. const { user, crowi } = req;
  170. const result = await getServerSideCommonProps(context);
  171. // check for presence
  172. // see: https://github.com/vercel/next.js/issues/19271#issuecomment-730006862
  173. if (!('props' in result)) {
  174. throw new Error('invalid getSSP result');
  175. }
  176. const props: Props = result.props as Props;
  177. if (user != null) {
  178. const User = crowi.model('User');
  179. const userData = await User.findById(req.user.id).populate({ path: 'imageAttachment', select: 'filePathProxied' });
  180. props.currentUser = userData.toObject();
  181. }
  182. await injectUserUISettings(context, props);
  183. await injectServerConfigurations(context, props);
  184. await injectNextI18NextConfigurations(context, props, ['translation', 'admin', 'commons']);
  185. return {
  186. props,
  187. };
  188. };
  189. export default MePage;